<template>
  <div class="search-bar">
    <a-form-model layout="inline" :model="formModel" ref="searchBar">
      <a-form-model-item v-for="item in formItems" :key="item.key" :label="item.label" :prop="item.key">
        <!-- 输入框 -->
        <a-input v-if="item.type === 'input' || !item.type" :placeholder="item.placeholder||'请输入'" v-model="formModel[item.key]" allowClear v-on="item.events" v-bind="item.props"></a-input>
        <!-- 下拉框 -->
        <a-select v-else-if="item.type === 'select'" :placeholder="item.placeholder||'请选择'" v-model="formModel[item.key]" allowClear v-on="item.events" v-bind="item.props" show-search>
          <a-select-option v-for="option in (typeof item.options === 'function' ? item.options() : item.options)" :key="option[item.keyWord && item.keyWord.value || 'value']">
            {{option[item.keyWord && item.keyWord.label || 'label']}}
          </a-select-option>
        </a-select>
        <!-- 单选项 -->
        <a-radio-group v-else-if="item.type=== 'radio'" v-model="formModel[item.key]" v-on="item.events" v-bind="item.props">
          <a-radio v-for="option in (typeof item.options === 'function' ? item.options() : item.options)" :key="option[item.keyWord && item.keyWord.value || 'value']" :value="option[item.keyWord && item.keyWord.value || 'value']">
            {{ option[item.keyWord && item.keyWord.label || 'label'] }}
          </a-radio>
        </a-radio-group>
        <!-- 多选项 -->
        <a-checkbox-group v-else-if="item.type === 'checkbox'" v-model="formModel[item.key]" :options="typeof item.options === 'function' ? item.options() : item.options" v-on="item.events" v-bind="item.props">
        </a-checkbox-group>
        <!-- 开关 -->
        <a-switch v-else-if="item.type === 'switch'" v-model="formModel[item.key]" v-on="item.events" v-bind="item.props">
        </a-switch>
        <!-- 日期选择器 -->
        <a-date-picker v-else-if="item.type === 'date'" v-model="formModel[item.key]" :placeholder="item.placeholder|| '请选择日期'" allowClear v-on="item.events" v-bind="item.props"></a-date-picker>
        <!-- 时间选择器 -->
        <a-time-picker v-else-if="item.type === 'time'" v-model="formModel[item.key]" :placeholder="item.placeholder|| '请选择时间'" allowClear v-on="item.events" v-bind="item.props"></a-time-picker>
        <!-- 日期范围 -->
        <a-range-picker v-else-if="item.type === 'dateRange'" v-model="formModel[item.key]" :placeholder="item.placeholder || ['开始日期','结束日期']" allowClear v-on="item.events" v-bind="item.props"></a-range-picker>
        <!-- 自定义 -->
        <component v-else-if="item.type === 'component'" :is="item.component" v-on="item.events" v-model="formModel[item.key]" v-bind="item.props"></component>
      </a-form-model-item>
      <a-form-model-item v-if="formBtn.search || formBtn.reset">
        <a-space>
          <a-button type="primary" v-if="formBtn.search" @click="search">查询</a-button>
          <a-button @click="reset" v-if="formBtn.reset">重置</a-button>
        </a-space>
      </a-form-model-item>
    </a-form-model>
  </div>

</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    formModel: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formItems: {
      type: Array,
      default: () => {
        return []
      }
    },
    formBtn: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    search() {
      this.formBtn.search()
    },
    reset() {
      this.formBtn.reset()
    }
  }
}
</script>

<style lang="less" scoped>
.search-bar {
  text-align: left;
  .ant-form-inline .ant-form-item {
    .ant-select {
      width: 200px;
    }
    .ant-time-picker {
      width: 160px;
    }
  }
}
</style>